<template>
  <div class="detail" v-if="detail">
    <i class="iconfont icon-back" @click="routerBack"></i>
    <div class="banner-detail">
      <swiper pandaclass="detail-banner-swiper" :pandaobj="pandaBannerObj"  :key="detail.photo.length">
        <div :to='data.url' class="detail-banner-item swiper-slide" v-for="data in detail.photo" :key="data.seq">
          <img :src="data.url" style="width: 100%;">
        </div>
      </swiper>
    </div>
    <div class="content-detail">
      <h2 class="title">
        <span class="tmall" :style="detail.platform === 1 ?'background-color: #f40;' : ''">
          {{detail.platform === 2 ? '天猫' : '淘宝'}}
        </span>
        <span class="keyword free-postage" v-if="detail.isFreePostage">包邮</span>
        {{detail.title}}
      </h2>
      <p  class="price-num">
        <span class="price">
          ¥<b class="big">{{detail.price}}</b>
        </span>
        <span  class="sale-num">月销量：{{detail.saleNum}}</span>
      </p>
    </div>
    <div class="footer">
      <div class="youhui">
        {{detail.couponValue}}
      </div>
      <div class="goBuy">
        {{detail.couponValue ? '领券购买' : '去淘宝买' }}
      </div>
    </div>
  </div>
</template>
<script>
import swiper from '@/components/Swiper'
import http from '@/util/http'

export default {
  data () {
    return {
      detail: null,
      pandaBannerObj: {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      }
    }
  },
  created () {
    console.log(this.$route.params)
    http.request({
      url: `/api/detail?id=${this.$route.params.id}&normal=1&sa=`
    }).then(res => {
      this.detail = res.data.data.detail
    })
  },
  methods: {
    routerBack () {
      this.$router.back()
    }
  },
  components: {
    swiper
  }
}
</script>

<style lang="scss" scoped>
.iconfont{
  position: fixed;
  z-index: 999;
  background: rgba(0,0,0,.5);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  font-size: 36px;
  color: wheat;
}
.content-detail{
  padding: 0 1rem;
  .title{
    font-size: .9rem;
    line-height: 1.6;
    color: #43240c;
    margin: 0;
    .tmall{
      background-color: #df2b2f;
      color: #fff;
      border-radius: .05rem;
      font-size: .32rem;
    }
    .free-postage{
      font-size: .32rem;
      color: #877a73;
    }
  }
  .price-num{
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
    .price{
      color: #fa585a;
      .big{
        font-size: 1.8rem;
      }
    }
    .sale-num{
      font-size: .32rem;
      color: #b1a9a5;
    }
  }
}
.footer{
  display: flex;
  font-size: 1.2rem;
  position: absolute;
  bottom: 0;
  z-index: 999;
  left: 0;
  right: 0;
  div{
    flex: 1;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
  }
  .youhui{
    color: #fa585a;
    background-color: white;
  }
  .goBuy{
    background-color: #fa585a;
    color: white;
  }
}
</style>
